<template>
    <div class = "menu-layer">
      <menu-component v-ref:component :menu-items = "menuItems"
      :select-index.sync = "index"
      :title = "title">
      </menu-component>

      <menu-options v-ref:options v-show ="isShowOption"
      :is-show-option.sync = "isShowOption">
      </menu-options>
    </div>
</template>

<script>
  import * as menuComponent from './menu-component.vue'
  import * as menuOptions from './menu-options.vue'
  import * as EchoKey from '../utils/echo-key'
  import echoMenu from '../utils/echo-menu'
  import EchoTool from '../utils/echo-tool'

//  let _click = 0
//  let _clickTimeOut = -1

  function enterMenu (submenu) {
    let _items = this.menuItems
    let _index = this.index
    let _echo = this.$echo
    let newPage = _echo.currentPage + '/' + _items[_index].key
    newPage = newPage.replace('disp', 'menu')

    if (_items[_index].enable === false) {
      return
    }

    if (_items[_index].type === 'sub') {
      submenu.menuItems = echoMenu.getMenuItems(newPage)
      submenu.$refs.menulayer.title = _items[_index].key
      this.isShowSubMenu = true
      _echo.pushPage(newPage)
    } else if (_items[_index].type === 'page') {
      _echo.clearMenu()        //   将菜单全部关掉
      _echo.routeTo(_items[_index].page)
    } else {
      this.isShowOption = true
      if (_items[_index].type === 'text') {
        this.$refs.options.optitonType = 'text'
        this.$refs.options.optionText = _items[_index].value
      } else if (_items[_index].type === 'number') {
        this.$refs.options.optitonType = 'number'
        this.$refs.options.optionNum = _items[_index].value
      } else if (_items[_index].type === 'zone') {
        this.$refs.options.optitonType = 'zone'
        this.$refs.options.optionZone = _items[_index].value
      } else if (_items[_index].type === 'date') {
        this.$refs.options.optitonType = 'date'
        this.$refs.options.optionData = _items[_index].value
      } else if (_items[_index].type === 'time') {
        this.$refs.options.optitonType = 'time'
        this.$refs.options.optionTime = _items[_index].value
      } else if (_items[_index].type === 'dualNumber') {
        this.$refs.options.optitonType = 'dualNumber'
        this.$refs.options.optionTitle = _items[_index].key
      } else if (_items[_index].type === 'range') {
        let _key = _items[_index].key
        _key = _key.charAt(11)
        this.$refs.options.rangeIndex = parseInt(_key) - 1
        this.$refs.options.optitonType = 'range'
        this.$refs.options.optionRange = echoMenu.getMenuItems('menu/System/Range')
        this.isShowOption = true
        return
      }
      this.$refs.options.optionObj = echoMenu.getMenuItems(newPage)
    }
  }

  function enterOption () {
    let _items = this.menuItems
    let _index = this.index
    if (_items[_index].type === 'text') {
      this.menuItems[this.index].value = this.$refs.options.optionText
    } else if (_items[_index].type === 'number') {
      this.menuItems[this.index].value = this.$refs.options.optionNum
    } else if (_items[_index].type === 'zone') {
      this.menuItems[this.index].value = this.$refs.options.optionZone
    } else if (_items[_index].type === 'date') {
      this.$refs.options.Right()
      this.menuItems[this.index].value = this.$refs.options.optionData
    } else if (_items[_index].type === 'time') {
      this.$refs.options.Right()
      this.menuItems[this.index].value = this.$refs.options.optionTime
    } else if (_items[_index].type === 'dualNumber') {
      this.$refs.options.Right()
    }
    let _type = _items[_index].type
    if (_type !== 'date' && _type !== 'dualNumber' && _type !== 'time') {
      this.isShowOption = false
    }
  }

  function enterFunc () {
    let _items = this.menuItems
    let _index = this.index
    let _echo = this.$echo
    let newPage = _echo.currentPage + '/' + _items[_index].key
    newPage = newPage.replace('disp', 'menu')

    if (_items[_index].type === 'sub' || _items[_index].type === 'page' ||
      _items[_index].type === 'information' ||
      _items[_index].type === 'range') {
      return
    } else {
      EchoTool.EchoFunc.option.func = false
      EchoTool.EchoFunc.option = _items[_index]
      EchoTool.EchoFunc.selection = echoMenu.getMenuItems(newPage)
      EchoTool.EchoFunc.option.func = true
    }
  }

  export default {
    components: {
      menuComponent,
      menuOptions
    },
    data () {
      return {
        index: 0,
        isShowOption: false,
        title: 'menu',
        optionObj: {}
      }
    },
    props: {
      menuItems: {
        type: Array,
        twoWay: true,
        require: true
      },
      isShowMenu: {
        type: Boolean,
        twoWay: true
      },
      isShowSubMenu: {
        type: Boolean,
        twoWay: true
      }
    },
    events: {
      [EchoKey.RIGHT_ENT] (evt) {
        if (this.isShowOption) {
          enterOption.call(this)
        } else {
          enterMenu.call(this, evt.vm)
        }
      },
      [EchoKey.LEFT] (evt) {
//        console.log('test ****> ' + this.$echo.currentPage)
//        debugger
        if (this.isShowOption) {
          let _items = this.menuItems
          let _index = this.index
          if (_items[_index].type === 'dualNumber') {
            this.$refs.options.Left()
          } else if (_items[_index].type === 'date') {
            this.$refs.options.Left()
          } else if (_items[_index].type === 'time') {
            this.$refs.options.Left()
          } else {
            this.isShowOption = false
          }
        } else if (this.isShowSubMenu) {
          this.isShowSubMenu = false
        } else if (this.$echo.currentPage === 'disp') {
          this.isShowMenu = false
        } else {
          this.index = 0
          this.$echo.popPage()
          evt.rehandle = true
        }
      },
      [EchoKey.UP] (evt) {
        if (this.isShowOption) {
          this.$refs.options.Up()
        } else {
          this.$refs.component.decSelection()
        }
      },
      [EchoKey.DOWN] (evt) {
        if (this.isShowOption) {
          this.$refs.options.Down()
        } else {
          this.$refs.component.incSelection()
        }
      },
      [EchoKey.FUNC] (evt) {
        enterFunc.call(this)
      }
    }
  }
</script>

<style lang = "less">
  .menu-layer {
    border: 2px solid grey;
    background-color: white;
    font-size: 30px;
    white-space: nowrap;
    width: 100%;
    /*height: 210px;*/
  }
</style>
